<template>
  <view class="statistics-card">
    <view class="label">
      <text>{{ serialNumber }}.</text>
      <text>
        {{ label }}
      </text>
    </view>
    <view class="content">
      <view class="info">
        <view class="info-text">
          <text class="num">有效填写：{{ filledNum }}/{{ sumNum }}</text>
        </view>
        <view v-if="toDetail" class="btn" @click="emtis('detail')">查看详情</view>
      </view>
      <view class="info-text" style="margin-top: 24rpx">
        <text class="num">有效比例：{{ formatToFixed(ratio * 100, 0) }}%</text>
      </view>

      <slot></slot>
    </view>
  </view>
</template>
<script setup lang="ts">
  import { formatToFixed } from '@/utils/number';

  defineProps({
    serialNumber: { type: Number, default: 0 },
    label: { type: String, default: '' },
    filledNum: { type: Number, default: 0 },
    sumNum: { type: Number, default: 0 },
    ratio: { type: Number, default: 0 },
    toDetail: { type: Boolean, default: false },
  });
  const emtis = defineEmits(['detail']);
</script>
<style lang="scss" scoped>
  .statistics-card {
    padding: 40rpx 24rpx;
    background-color: white;
    border-radius: 16rpx;
    .label {
      font-size: 28rpx;
      line-height: 40rpx;
      font-weight: 700;
      display: flex;
      gap: 8rpx;
      align-items: center;
    }
    .content {
      padding-left: 24rpx;
      .info-text {
        padding: 4rpx 16rpx;
        width: fit-content;
        display: flex;
        gap: 16rpx;
        align-items: center;
        flex-shrink: 0;
        background-color: #d0f7ff;
        color: #2878ff;
        border-radius: 8rpx;
        .num {
          font-size: 28rpx;
        }
      }
      .info {
        margin-top: 32rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16rpx;

        .btn {
          padding: 8rpx 16rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 8rpx;
          font-size: 28rpx;
          line-height: 40rpx;
          background-color: #f2f3f5;
        }
      }
    }
  }
</style>
